<template>
  <div>
    <div style="width:100%">
      <el-radio-group v-model="labelPosition" size="small">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
        <el-radio-button label="top">顶部对齐</el-radio-button>
      </el-radio-group>
      <el-form ref="form" :label-position="labelPosition" :model="form" label-width="80px" style="border-bottom:3px solid #000">
        <el-form-item label="邮箱用户">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.name" placeholder="请输入您的任何一个三方邮箱客户端账号"></el-input>
            </el-col>
            <el-col :span="10">
              <i class="el-icon-question" style="font-size:10px" v-if="form.name==''">
                <strong>注册名+@+某网站地址，例如：注册名+@yahoo.com、注册名+@gmail.com、注册名+@sina.com等。注意：邮箱地址格式为“6~18个字符，可使用字母、数字、下划线，需以字母开头”。</strong>
              </i>
              <i class="el-icon-success" style="font-size:40px" v-else-if="rightEmail"></i>
              <i class="el-icon-error" style="font-size:40px" v-else-if="!rightEmail"></i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="授权码">
          <el-row :gutter="0">
            <el-col :span="10">
              <el-input v-model="form.sfpassword" placeholder="请输入您的三方授权码"></el-input>
            </el-col>
            <el-col :span="10">
              <i class="el-icon-question" style="font-size:10px" v-if="form.sfpassword==''">
                <strong>授权码是用于登录第三方邮件客户端的专用密码。适用于登录以下服务: POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务。</strong>
              </i>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="客户端">
          <el-select v-model="form.region" placeholder="请选择邮箱客户端" style="float:left">
            <el-option label="qq" value="qq"></el-option>
            <el-option label="163" value="163"></el-option>
          </el-select>
        </el-form-item>
          <el-button type="danger" @click="onSubmit()">立即解析</el-button>
          <el-button>取消</el-button>
  
      </el-form>
      <strong>温馨提示：在线获取客户端邮件信封与您的网络环境有关，请耐心等待！</strong>
    </div>

    <div style="width:100%">
      <strong
        v-if="messages.length!=0"
        style="margin-left:20%"
      >您一共从[{{form.region}}]客户端获取到[{{messages.length}}]封message</strong>
      <el-card :body-style="{ padding: '0px' }" v-for="(message,index) of messages" :key="index">
      <div>
        <img src="./image/icon.png" style="width :50px;height: 50px;display: block;float: left;" />
      </div>
      <div>
        <span style="color:#00F;float:left" v-html="'标题 :'+message.subject"></span>
        <br />
        <br />
        <span style="float:left" v-html="'messageId :'+message.messageId"></span>
      </div>
      <div style="padding: 3px;">
        <div class="bottom clearfix">
          <el-button type="text" class="button" @click="emldetail(message)">查看详情</el-button>
        </div>
      </div>
    </el-card>
    </div>

    
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      labelPosition: "right",
      form: {
        name: "",
        sfpassword: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      messages: []
    };
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    },
    rightEmail() {
      return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z]{2,5}$/.test(
        this.form.name
      );
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      let data = {
        mailName: this.form.name,
        sfPassword: this.form.sfpassword,
        mailType: this.form.region
      }; //post传递对象到后台
      axios
        .post("/api/EmlImapController/imapAnalyse?userName="+this.userSO_json.userName, data, {
          headers: {
              //头部信息
              "Content-Type": "application/json;charset=utf-8",
              token: this.userSO_json.token
            }
        })
        .then(response => {
          let resultUtils = response.data;
          console.log(resultUtils);
          this.messages = resultUtils.data;
        })
        .catch(error => {
        this.$message({
        showClose: true,
        message: "后端token过期，请重新登录",
        type: "warning"
      });
        });
    },
    emldetail(passObject) {
      console.log(passObject);
      this.$router.push({
        path: "/backhome/imappop3/detail_imap",
        query: {
          message: passObject
        }
      });
    }
  }
};
</script>

<style scoped>
</style>